<template lang="pug">
  div
    el-card.tableFilter(:body-style="{padding: '0 10px'}")
      div(slot="header" class="boxHeader") 添加方式
      el-radio-group(v-model="queryType")
        el-radio-button(:label="1") 按医院添加
        el-radio-button(:label="2") 按科室添加
        el-radio-button(:label="3") 按患者添加
      el-divider
      el-row(:gutter="24")
        el-col(:span="12")
          h2.innerTitle(class="boxHeader") 待添加对象
          s-table(
            ref="table"
            :column="tableObj.column"
            :filterProps="{items: tableObj.filterItems, layoutCol: { sm: 24, md: 12, lg: 8 }}"
            :queryFn="tableObj.getList"
            :rowKey="tableObj.rowKey"
            :tableProps="{size: 'mini'}"
            )
            template(slot-scope="text, scope" slot="action")
              el-button(
                size="mini"
                type="primary"
                plain
                @click="addHandle(scope)"
                ) 添加
        el-col(:span="12")
          h2.innerTitle(class="boxHeader")
            | 已添加对象
            el-button.operator(size="mini" type="success" @click="saveHandle") 保存
          el-alert(show-icon :closable="false")
            span(slot="title")
              | 共添加了
              span(v-if="queryType === 1")
                b.c_error {{topSum.hospital || 0}}
                | 家医院，抽查
              span(v-if="queryType === 2")
                b.c_error {{topSum.hospital || 0}}
                | 家医院，含
                b.c_error {{topSum.depart || 0}}
                | 个科室，抽查
              span(v-if="queryType === 3") 待抽查人员
              b.c_error {{topSum.person ? Math.ceil(topSum.person) : 0}}
              | 人
          s-table.mt16(
            ref="selectedtable"
            :column="selectedColumn"
            :dataPops="selectedList"
            :rowKey="tableObj.rowKey"
            :tableProps="{size: 'mini'}"
            )
            template(slot-scope="text, scope, index" slot="action")
              el-button(size="mini" type="error" plain icon="el-icon-delete" @click="delHandle(index, 'left')") 删除
            template(slot-scope="text, scope, index" slot="rate")
              el-input-number.mr5(:min="1" :max="100" v-model="scope.rate" size="small" style="width: 86px" controls-position="right" @change="value => perHandle(value, index)")
              | %
    affix
      el-card.mt12.tr
        el-button(@click="$router.go(-1)" size="small") 返回
</template>
<script>
import { STable, Affix } from '@/components'
import { psnList, deptList, hsopLis, taskSubmit } from '@/api/remote'
import _ from 'lodash'

const column1 = [
  {
    prop: 'sort',
    label: '序号'
  },
  {
    prop: 'medinsName',
    label: '医院'
  },
  {
    prop: 'inhospPsncnt',
    label: '在院人数',
    align: 'center'
  },
  {
    prop: 'action',
    label: '操作',
    width: '100',
    align: 'center'
  }
]

const column2 = [
  {
    prop: 'sort',
    label: '序号'
  },
  {
    prop: 'medinsName',
    label: '医院'
  },
  {
    prop: 'deptName',
    label: '科室'
  },
  {
    prop: 'inhospPsncnt',
    label: '在院人数',
    align: 'center'
  },
  {
    prop: 'action',
    label: '操作',
    width: '100',
    align: 'center'
  }
]

const column3 = [
  {
    prop: 'sort',
    label: '序号'
  },
  {
    prop: 'medinsName',
    label: '医院'
  },
  {
    prop: 'deptName',
    label: '科室'
  },
  {
    prop: 'psnName',
    label: '姓名',
    align: 'center'
  },
  {
    prop: 'mdtrtId',
    label: '住院号',
    align: 'center'
  },
  {
    prop: 'action',
    label: '操作',
    width: '100',
    align: 'center'
  }
]

const tableObj1 = {
  column: column1,
  filterItems: [
    {
      key: 'medinsId',
      label: '医疗机构',
      type: 'orgselect'
    },
    {
      key: 'medinslv',
      label: '机构等级',
      type: 'selectdict',
      dictKey: 'MEDINSLV'
    },
    {
      key: 'admdvs',
      label: '医保区',
      type: 'selectdict',
      dictKey: 'admdvs'
    },
    {
      key: 'insutype',
      label: '险种类型',
      type: 'selectdict',
      dictKey: 'INSUTYPE'
    },
    {
      key: 'inhospCnt',
      label: '在院人数',
      type: 'selectdict',
      dictKey: 'SCEN_TASK_STAS'
    }
  ],
  getList: hsopLis,
  rowKey: 'medinsId'
}

const tableObj2 = {
  column: column2,
  filterItems: [
    {
      key: 'medinsId',
      label: '医疗机构',
      type: 'orgselect'
    },
    {
      key: 'medinslv',
      label: '医院级别',
      type: 'selectdict',
      dictKey: 'MEDINSLV'
    },
    {
      key: 'admdvs',
      label: '医保区',
      type: 'selectdict',
      dictKey: 'admdvs'
    },
    {
      key: 'insutype',
      label: '险种类型',
      type: 'selectdict',
      dictKey: 'INSUTYPE'
    },
    {
      key: 'inhospCnt',
      label: '在院人数',
      type: 'selectdict',
      dictKey: 'SCEN_TASK_STAS'
    },
    {
      key: 'deptId',
      label: '科室'
    }
  ],
  getList: deptList,
  rowKey: 'deptId'
}

const tableObj3 = {
  column: column3,
  filterItems: [
    {
      key: 'medinsId',
      label: '医疗机构',
      type: 'orgselect'
    },
    {
      key: 'deptId',
      label: '科室',
      type: 'selectdict',
      dictKey: 'MEDINSLV'
    },
    {
      key: 'psnName',
      label: '姓名'
    },
    {
      key: 'admdvs',
      label: '医保区',
      type: 'selectdict',
      dictKey: 'admdvs'
    },
    {
      key: 'insutype',
      label: '险种类型',
      type: 'selectdict',
      dictKey: 'INSUTYPE'
    },
    {
      key: 'inhospDay',
      label: '住院天数',
      type: 'selectdict',
      dictKey: 'SCEN_TASK_STAS'
    }
  ],
  getList: psnList,
  rowKey: 'mdtrtId'
}

export default {
  name: 'RemoteAddForm',
  components: {
    STable,
    Affix
  },
  computed: {
    tableObj () {
      const { queryType } = this
      return queryType === 1 ? tableObj1 : queryType === 2 ? tableObj2 : tableObj3
    },
    // 已添加对象表格表头，医院和科室增加‘添加比例’
    selectedColumn () {
      const { queryType, tableObj } = this
      const column = [...tableObj.column]
      if (queryType === 1 || queryType === 2) {
        column.splice(column.length - 2, 0, {
          prop: 'rate',
          label: '添加比例'
        })
      }
      return column
    }
  },
  watch: {
    queryType () {
      this.selectedList = [] // 清空添加对象列表
      // 刷新待选择表格数据
      this.$nextTick(function () {
        this.$refs.table.refresh(true)
      })
    },
    selectedList: {
      handler (val) {
        const { queryType } = this
        const topSum = {}
        if (queryType === 1) {
          topSum.hospital = val.length
          topSum.person = _.reduce(val, (sum, cur) => {
            return sum + (parseInt(cur.inhospCnt) * cur.rate / 100)
          }, 0)
        } else if (queryType === 3) {
          topSum.person = val.length
        } else {
          topSum.hospital = _.uniq(_.map(val, 'medinsId')).length
          topSum.depart = val.length
          topSum.person = _.reduce(val, (sum, cur) => {
            return sum + (parseInt(cur.inhospCnt) * cur.rate / 100)
          }, 0)
        }
        this.topSum = { ...topSum }
      },
      deep: true
    }
  },
  data () {
    return {
      queryType: 1,
      selectedList: [],
      topSum: {
        hospital: 0,
        depart: 0,
        person: 0
      }
    }
  },
  methods: {
    // 添加对象
    addHandle (obj) {
      const { selectedList, queryType, tableObj: { rowKey } } = this
      if (selectedList.find(x => x[rowKey] === obj[rowKey])) {
        return
      }
      if (queryType !== 3) {
        obj.rate = 1
      }
      selectedList.push({ ...obj })
      this.selectedList = selectedList
    },
    // 已添加对象表格数据删除列
    delHandle (index) {
      const { selectedList } = this
      selectedList.splice(index, 1)
      this.selectedList = selectedList
    },
    // 比例数据收集
    perHandle (value, index) {
      const { selectedList } = this
      selectedList[index].rate = value
      this.selectedList = selectedList
    },
    // 保存提交
    saveHandle () {
      const { queryType, selectedList } = this
      taskSubmit({ addWay: queryType }, selectedList).then(() => {
        this.$message.success('保存成功')
        this.$router.go(-1)
      })
    }
  }
}
</script>
<style lang="less" scoped>
h2.innerTitle{
  padding-left: 10px;

  &::before{
    left: 0
  }

  .operator{
    position: absolute;
    right: 0;
    bottom: 10px
  }
}
</style>
